<template>
  <header class="header-bar">
      <div class="search-warp">
           <input type="text" class="search-input" v-model="val"  />
          <a href="javascript:;" class="clear" v-show="val.length >=1" @click="val=''">x</a>
      </div> 
          <!-- <div class="suggtions">
              <ul>
                  <li v-for="(item,index) in suggestionsArr" :key="index" @click="search(item)">
                      {{item.name}}
                      <p>{{item.district}}</p>
                      </li>
              </ul>
          </div> -->
  </header>
</template>

<script>
export default {
    name:'SearchLocation',
    data(){
        return{
            val:'',
          //  suggestionsArr:[]
        }
    },
    // watch: {
    //     val (newVal){
    //         this.suggestions(newVal)
    //     }
    // },
    // methods: {
    //     async suggestions(val){
    //         const res=await this.$api.product.suggestions(val)
    //         console.log(res)
    //     }
    // search(keyword){
    //     this.suggestionsArr=[]
    //     this.$emit('onSearch',keyword)
    // }
    // },
}
</script>

<style lang="scss" scoped>
.header-bar{
    @include wh(100%,98px);
    @include flex(row,center,center);
    .search-warp{
        @include wh(auto,64px);
        flex: 1;
        margin: 0 30px;
        border: 2px solid #ccc;
        border-radius: 32px;
        position: relative;
        input{
            @include wh(100%,100%);
            border: 0;
            background: transparent;
            outline: none;
        }
        .clear{
            position: absolute;
            font-size: $font-size-m;
        }
    }
    // .suggestions-warp{
    //     position: fixed;
    //     top: 98px;
    //     left: 0;
    //     li{
    //         font-size: $font-size-m;
    //     }
    // }
}
</style>